import Vue from 'vue'
import VueRout from 'vue-router'
const Home = () => import('../pages/Home')
const List = () => import('../pages/List')
const Show = () => import('../pages/Home/Show/index.vue')
Vue.use(VueRout)
// 每次都添加很麻烦,所以直接在VueRout中复写push函数
let oldPush = VueRout.prototype.push
VueRout.prototype.push = function (location, cb = () => { }, cb2 = () => { }) {
    // 函数获取时this为空,所以需要修改this指向
    oldPush.call(this, location, cb, cb2)
}
let router = new VueRout({
    mode: 'history',
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: "/home",
            component: Home,
            children: [
                {
                    path: '/home/show/:name/:age?',
                    name: 'Show',
                    component: Show,
                    // 路由独享的守卫
                    // 直接书写在路由配置中beforeEnter(),当加载当前路由时触发
                    beforeEnter(_, __, next) {
                        // ,组件中数据更新不会触发
                        console.log('正在尝试加载show组件');
                        next()
                    }
                },

            ]
        },
        {
            path: "/list",
            component: List
        }
    ]
})
// 全局前置守卫,在载入每个路由时都会加载的守卫,其中传入一个回调函数,函数中包含三个参数,(去的路由,来的路由(初始载入为'/'),next())
// next()是否放行的函数,其中传入路由就会将其转到其中的路由中,如果不传递参数代表直接放行
// 同一组件接收不同参数时也会跳转,例如动态路由
router.beforeEach((_, __, next) => {
    // console.log(to, from);
    // console.log(next);
    // if (to.fullPath === "/list") {
    //     next()
    // } else {
    //     next('/list')
    // }
    console.log('任何页面加载时就会直接执行');
    next()
})
router.beforeResolve((_, __, next) => {
    console.log('在进入组件,组件内守卫及其信息解析完毕后执行');
    next()
})
router.afterEach(() => {
    // console.log(to, from);
    // 当路由跳转全部完成,最后的最后加载当前钩子,其中不含有next函数
    console.log('全部完成');
    // next()
})
export default router